package com.turman.composebook.views

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun StickyHeaderSampleView(modifier: Modifier=Modifier) {
    val grouped: Map<Char, List<Snack>> = snacksOrdered.groupBy { it.name[0] }
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(horizontal = 12.dp, vertical = 8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        content = {

            grouped.forEach { (initial: Char, snacks: List<Snack>) ->

                stickyHeader {
                    SnackHeader(initial)
                }

                items(snacks.size) { it ->
                    SnackCard(snack = snacks[it])
                }
            }
        })
}

@Composable
private fun SnackHeader(initial: Char) {
    Text(
        text = "$initial",
        fontSize = 24.sp,
        color = Color(0xff039BE5),
        modifier = Modifier
            .background(Color(0xffE3F2FD))
            .fillMaxWidth()
            .padding(horizontal = 12.dp,vertical = 8.dp)
    )
}